import { useEffect, useState } from 'react'
import routes from './route/routes'
// import RouteView from './route/RouteView'
import { useRoutes, useLocation, useNavigate } from 'react-router-dom'
import { Layout, Space } from 'antd';
import {
  ContainerOutlined,
  DesktopOutlined,
  PieChartOutlined,
} from '@ant-design/icons';
import { Button, Menu } from 'antd';
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = [
  getItem('账户管理', '/l1  ist', <PieChartOutlined />),
  getItem('房号管理', '/name', <DesktopOutlined />),
  getItem('客户管理', '/home', <ContainerOutlined />),
];

function App() {
  const location = useLocation()
  const navigate = useNavigate()
  const token = localStorage.getItem('token')
  useEffect(() => {
    if (!token && location.pathname !== '/login') {
      navigate('/login')
    }
  }, [location])
  const { Sider, Content } = Layout;
  const contentStyle = {
    textAlign: 'center',
    minHeight: 120,
    lineHeight: '120px',

  };
  const siderStyle = {
    height:"600px",
    textAlign: 'center',
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: 'rgb(0, 6, 44)',
  };
  const [collapsed,] = useState(false);
  const onClick = (e) => {
     let vie= e.key
    navigate(`${vie}`)
  };
  return (
    <>
      {/* {useRoutes(routes)} */}
      <Space direction="vertical" style={{ width: '100%' }} size={[0, 48]}>
        <Layout>
          <Sider style={siderStyle}>
          <div
      style={{
        width: 200,
      }}
    >
      <Menu
        mode="inline"
        theme="dark"
        inlineCollapsed={collapsed}
        items={items}
        onClick={onClick}
      />
    </div>
          </Sider>
          <Layout>
            <Content style={contentStyle}>
            {useRoutes(routes)}
            </Content>
          </Layout>
        </Layout>
     </Space>
    </>
  )
}

export default App
